<template>
  <el-popover placement="bottom" width="200" trigger="click" popper-class="selectTree">
    <el-tree
      :data="$attrs.data"
      accordion
      :expand-on-click-node="false"
      props="defaultProps"
      highlight-current
      check-on-click-node
      check-strictly
      @node-click="onSelectTreeNode"
    >
      <div
        class="customTreeItem"
        :class="selected===data?'active':''"
        slot-scope="{ node, data }"
      >{{data.label}}</div>
    </el-tree>

    <el-select
      slot="reference"
      ref="select"
      v-model="selected"
      value-key="code"
      size="small"
      popper-class="custom-select"
    >
      <el-option
        class="custom-option"
        v-for="item in $attrs.list"
        :key="item.code"
        :value="item"
        :label="item.name"
      ></el-option>
    </el-select>
  </el-popover>
</template>

<script>
export default {
  name: "selectTree",
  data() {
    return {
      isShowSelect: false,
      selected: null,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  props: ["defVal"],
  watch: {
    defVal(value) {
      if (value) {
        this.selected = value;
        this.$emit("change", this.selected);
      }
    }
  },
  methods: {
    onSelectTreeNode(data) {
      this.selected = data;
      this.$emit("change", this.selected);
    },
    popoverHide() {
      this.isShowSelect = false;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.customTreeItem {
  width: 100%;
  &.active {
    background-color:rgba(0,0,0,.1) ;
  }
}

.el-select-dropdown__item.custom-option {
  height: auto;
  padding: 0;
}
</style>
<style lang="scss">
.selectTree {
  /deep/ {
    .el-tree-node__content {
      height: 34px;
      line-height: 34px;
    }
  }
  overflow: auto;
}
.el-tree{
  width: 200px;
  overflow: auto;
}
.custom-select {
  z-index: 0 !important;
}
</style>
